/* 导航栏显示隐藏二维码 */
(function () {
    const header_nav_app = document.querySelector('.header-nav-app');
    const down_box = document.querySelector('.down-box');
    header_nav_app.addEventListener('mouseover', function () {
        header_nav_app.classList.add('active');
        down_box.style.height = 148 + 'px';
    })
    header_nav_app.addEventListener('mouseout', function() {
        header_nav_app.classList.remove('active');
        down_box.style.height = 0 + 'px';
    })
})();

/* 导航栏显示购物车 */
(function () {
    const shoppingCart = document.querySelector(".Shopping-Cart");
    const show_cart = document.querySelector('.show-cart');
    shoppingCart.addEventListener('mouseover',function(){
        show_cart.style.height = 100 + 'px';
        shoppingCart.addEventListener('mouseout',function(){
            show_cart.style.height = '';
        })
    });
})();

/* 显示隐藏商品列表图 */
(function(){
    const nav_li = $(".nav-list .nav-item");
    const commodityWrap = $(".nav-commodity-wrap");
    const commodity_ul = $(".nav-commodity ul");
    
    nav_li.hover(function () {
        commodityWrap.stop().slideDown(300);
    }, function () {
        commodityWrap.stop().slideUp(300);
    });
    commodityWrap.hover(function () {
        $(this).stop().show();              // .nav-commodity-wrap
    }, function () {
        $(this).stop().slideUp(300);
    });
    nav_li.hover(function () {
    // 获得第一个元素的名称和索引
        const index = $(this).index();      // li.nav-item
        commodity_ul.eq(index).show().siblings().hide();
    });
})();

/* 搜索物品 */
function search() {
    let li_List = $(".text-list li");
    $(li_List).each(function (index, element) {
        $(element).mouseover(function () {
            let liElem = $(this).text();
            $(".search-text").attr("value", liElem);
        })
    })
}
search();

/* 二级菜单 */
(function () {
    const menu_list_nav = document.querySelectorAll(".menu-list-nav li");
    const menu_list_item = document.querySelectorAll(".menu-list-item");
    
    for (let i = 0; i < menu_list_nav.length; i++){
        menu_list_nav[i].onmouseover = function () {
            // menu_list_item[i].style.display = "none";
            menu_list_item[i].style.display = "block";
        }
        menu_list_nav[i].onmouseout = function () {
            menu_list_item[i].style.display = "none";
        }
        menu_list_item[i].onmouseover = function () {
            menu_list_item[i].style.display = "block";
        }
        menu_list_item[i].onmouseout = function () {
            menu_list_item[i].style.display = "none";
        }
    }
})();

(function () {
    const nav_category = document.querySelector('.nav-category');
    const menu_list = document.querySelectorAll('.menu-list')[0];
    nav_category.onmouseenter = function () {
        menu_list.style.display = 'block';
    }
    nav_category.onmouseleave = function () {
        menu_list.style.display = 'none';
    }
    menu_list.onmouseenter = function () {
        menu_list.style.display = 'block';
    }
    menu_list.onmouseleave = function () {
        menu_list.style.display = "none";
    }
})();

/* 筛选 */
class screen{
    constructor() {
        this.order_list = document.querySelectorAll(".order-list li");
        this.addEvent();
    }
    addEvent() {
        const that = this;
        for (let i = 0; i < this.order_list.length; i++){
            this.order_list[i].index = i;
            this.order_list[i].addEventListener("click", function () {
                for (let j = 0; j < that.order_list.length; j++){
                    that.order_list[j].className = ".order-list li";
                }
                that.order_list[i].className = "order-active";
            })
        }
    }
}
new screen();

/* 分页 */
$(function () {
    $(".pagination").pagination(270, {
        items_per_page: 10,
        num_display_entries: 4,
        num_edge_entries: 1,
        current_page: 0,
        prev_text: `<i class="iconfont style="font-size:24px; vertical-align:bottom;>&#xe603;</i>`,
        next_text: `<i class="iconfont style="font-size:24px; vertical-align:bottom;>&#xe629;</i>`,
        ellipse_text: "···",
        prev_show_always: true,
        callback: function (index) {
            // console.log(index);
        }
    })
});

/* 轮播图 */
(function () {
        let swiper_container = document.querySelector(".swiper-container");
        let swiper_ul = swiper_container.children[0];
        let swiper_li = swiper_ul.children;
        let cir_wrap = document.querySelector(".swiper-pagination");
        let cir_num = cir_wrap.children;
        let goodsUl_width = swiper_ul.offsetWidth;
        let goodsIndex = 0;
        let time = "";

        for (let i = 0; i < cir_num.length; i++){
            cir_num[i].index = i;

            cir_num[i].onclick = function () {
                if (goodsIndex === swiper_li.length) {
                    swiper_ul.style.left = 0 + "px";
                }

                for (let i = 0; i < cir_num.length; i++) {
                    cir_num[i].className = "";
                }
                this.className = "swiper-pagination-bullet-active";

                let target = -this.index * goodsUl_width;
                move(swiper_ul, { left: target,});

                goodsIndex = this.index;
            }
        }

        function play() {
            goodsIndex++;
            if (goodsIndex === swiper_li.length - 8) {
                swiper_ul.style.left = -900 + "px";
                goodsIndex = 0;
            }
            move(swiper_ul, {left: goodsIndex * -goodsUl_width});


            for (let i = 0; i < cir_num.length; i++) {
                cir_num[i].className = "";      // 清除所有的类样式
            }

            if (goodsIndex === swiper_li.length - 8) {
                cir_num[0].className = "swiper-pagination-bullet-active";
            } else {
                cir_num[goodsIndex].className = "swiper-pagination-bullet-active";
            }
        }

        // 自动播放
        time = setInterval(() => {
            play();
        }, 3000);
        swiper_container.onmouseenter = function () {
            clearInterval(time);
        };
        swiper_container.onmouseleave = function () {
            time = setInterval(play ,3000);
        }

    function move(ele, data, cb){
        clearInterval(ele.t);
        ele.t = setInterval(() => {
            let flag = true;
            for(let attr in data){
                let now = parseInt(getStyle(ele, attr));
                
                let speed = (data[attr] - now) / 20;
                speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
                
                ele.style[attr] = now + speed + "px";
                
                if(now !== data[attr]){
                    flag = false;
                }
            }
            if(flag){
                clearInterval(ele.t);
                cb && cb();
            }
        }, 20);
    }
    
    // 获取非行内样式的兼容封装
        function getStyle(ele, attr){
            if(getComputedStyle){
                return getComputedStyle(ele)[attr]
            }else{
                return ele.currentStyle[attr]
            }
        }
})();
    
/* 显示隐藏二维码 */
(function () {
    const wx = document.querySelector('.wx');
    const pvg = document.querySelector('#wx');
    wx.onmouseenter = function () {
        pvg.style.display = 'block';
    }
    wx.onmouseleave = function() {
        pvg.style.display = 'none';
    }
})();

/* -------------------- 商品列表 ------------------- */
// class goods_list{
//     constructor() {
//         this.list_cont = document.querySelector(".goods-list");
//         this.url = "http://localhost:3000/data/goods.json";

//         this.load();
//     }

//     load() {
//         ajax({
//             url: this.url,
//             success: (res) => {
//                 // console.log(res);       // 商品信息

//                 this.res = JSON.parse(res);
//                 // console.log(this.res);       // 商品信息

//                 this.render();
//             }
//         })
//     }

//     render() {
//         // console.log(this.res);       // 商品信息

//         let str = "";
//         for (let i = 0; i < this.res.length; i++){
//             str += `<li class="goods-item fl" indexNum="${this.res[i].proId}">
//                             <a href="./Details.html">
//                                 <div class="figure-img">
//                                     <img src="${this.res[i].imgUrl_1}" alt="">
//                                 </div>
//                                 <h2 class="title">${this.res[i].name}</h2>
//                                 <p class="price">
//                                     <span>${this.res[i].price}元</span>
//                                 </p>
//                                 <div class="thumbs">
//                                     <img src="${this.res[i].imgUrl_1}" alt="" style="width: 34px;height: 34px;">
//                                 </div>
//                             </a>
//                     </li>`
//         }
//         this.list_cont.innerHTML = str;
//     }
// }
// new goods_list;

/* 登录成功之后，存储登录成功的标志 */
const login = document.querySelectorAll(".login")[0];
const welcome = document.querySelectorAll(".login-welcome")[0];
const wel_sign = welcome.querySelector("span");
const exit = document.querySelector(".exit");

if (localStorage.getItem("state") === "ok") {
    login.style.display = "none"
    welcome.style.display = "block";
    wel_sign.innerHTML = localStorage.getItem("user");
}
exit.addEventListener("click", function () {
    localStorage.setItem("state", "");
    login.style.display = "block";
    welcome.style.display = "none";
})

const shop = document.querySelectorAll(".shop")[0];
shop.addEventListener("click", function () {
    if (localStorage.getItem("state") !== "ok") {
        if (confirm("你还没登录，请先登录！")) {
            location.href = "../html/Login.html";
        }
        return false;
    }
})